 <!-- 解决ul列表冲突：
  解决方法：将所有的ul列表都转换为ol列表，同时设置唯一标识便于识别
  改变样式，去除显示代码中<p>标签，使<li>中元素在同一行中显示 -->
 <template>
  <main>
    <div class="todolist">
      <div class="todolist-header">
        <section>
          <label for="title">ToDoList</label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="添加ToDo"
            required="required"
            autocomplete="off"
          />
        </section>
      </div>
      <div class="todolist-body">
        <section class="todosection">
          <h2>正在进行 <span id="todocount"></span></h2>
          <ol id="todolist" class="demo-box"></ol>
          <h2>已经完成 <span id="donecount"></span></h2>
          <ol id="donelist" class="completed-box"></ol>
        </section>
      </div>
    </div>
  </main>
</template>
<script>
$(function () {
  load();
  $('#title').on('keydown', function (event) {
    if (event.keyCode == 13) {
      if ($(this).val() === '') {
        alert('请输入内容哦！');
      } else {
        //读取本地存储的数据
        var local = getData();
        local.push({
          title: $('#title').val(),
          done: false
        });
        $(this).val('');
        saveData(local);
        load(); // 初始化页面，加载已有代办事项
      }
    }
  });

  // 删除操作
  $('ol').on('click', 'a', function () {
    var data = getData();
    var index = $(this).attr('id');
    if (index >= 0 && index < data.length) {
      data.splice(index, 1);
      saveData(data);
      load();
    }
  });

  // 完成操作
  $('ol').on('click', 'input', function () {
    var data = getData(); // 从localStorage中读取todolist数据
    var index = $(this).siblings('a').attr('id');
    if (index >= 0 && index < data.length) {
      data[index].done = $(this).prop('checked');
      saveData(data); // 保存数据
      load();
    }
  });

  // 读取本地存储的数据
  function getData () {
    var data = localStorage.getItem('todolist');
    if (data !== null) {
      try {
        return JSON.parse(data);
      } catch (e) {
        console.error('解析本地存储数据失败:', e);
        return [];
      }
    } else {
      return [];
    }
  }

  // 保存本地存储数据
  function saveData (data) {
    if (Array.isArray(data)) {
      localStorage.setItem('todolist', JSON.stringify(data));
    } else {
      console.error('无效的数据格式:', data);
    }
  }

  // 渲染加载数据
  function load () {
    var data = getData();
    // 遍历之前清空ol
    $('#todolist, #donelist').empty();
    $.each(data, function (index, n) {
      if (n.done) {
        $('#donelist').prepend(
          `<li><input type='checkbox' checked='checked'>${n.title} <a href='javascript:;' id="${index}" class='delete-btn'>×</a> </li>`
        );
      } else {
        $('#todolist').prepend(//href='javascript:;代表的是发生动作时执行一段javascript代码，但是这个代码是空的，所以什么也不执行
          `<li><input type='checkbox'>${n.title}<a href='javascript:;' id="${index}" class='delete-btn'>×</a> </li>`
        );
      }
    });
    // 个数
    $('#todocount').text($('#todolist li').length);
    $('#donecount').text($('#donelist li').length);
  }
});
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  background: #cdcdcd;
}

.todolist-header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}

section {
  margin: 0 auto;
}

label {
  float: left;
  max-width: 200px;
  line-height: 50px;
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.todolist-header input {
  float: right;
  width: 50%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}

input:focus {
  outline-width: 0;
}

h2 {
  position: relative;
}

span {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #e6e6fa;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

ol {
  padding: 0;
  list-style: none;
}

li input {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

p {
  margin: 0;
}

li {
  height: 32px;
  line-height: 32px;
  background: #fff;
  position: relative;
  margin-bottom: 10px;
  padding: 0 45px;
  border-radius: 3px;
  border-left: 5px solid #629a9c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  /* //text-align: right; */
}

ol.demo-box li {
  cursor: move;
}

ol.completed-box li {
  border-left: 5px solid #999;
  opacity: 0.5;
}

li a {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #fff;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

li a.delete-btn {
  position: absolute;
  top: 2px;
  right: 100px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #fff;
  background: #ccc;
  line-height: 14px;
  text-align: right;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

footer {
  color: #666;
  font-size: 14px;
  text-align: center;
}

footer a {
  color: #666;
  text-decoration: none;
  color: #999;
}

@media screen and (max-device-width: 620px) {
  section {
    width: 96%;
    padding: 0 2%;
  }
}

@media screen and (min-width: 50px) {
  section {
    max-width: 600px;
    padding: 0 10px;
  }
}

.todolist {
  width: 98%;
  height: 98%;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: hidden;
}
</style>  





<!-- localStorage特性创建一个网页记事本组件，实现输入事项并持久保存，支持事项的完成状态切换和删除功能
 问题：冲突导致侧边栏被覆盖，菜单列表不显示
 冲突产生原因：ul列表域el-aside中的ul列表发生冲突 -->
<!-- <template>
  <main>
    <div class="todolist">
      <div class="todolist-header">
        <section>
          <label for="title">ToDoList</label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="添加ToDo"
            required="required"
            autocomplete="off"
          />
        </section>
      </div>
      <div class="todolist-body">
        <section class="todosection">
          <h2>正在进行 <span id="todocount"></span></h2>
          
          <ol id="todolist" class="demo-box"></ol>
          <h2>已经完成 <span id="donecount"></span></h2>

          <ul id="donelist"></ul>
        </section>
      </div>
    </div>
  </main>
</template>
<script>
$(function () {
  load();
  $('#title').on('keydown', function (event) {
    if (event.keyCode == 13) {
      if ($(this).val() === '') {
        alert('请输入内容哦！');
      } else {
        //读取本地存储的数据
        var local = getData();
        local.push({
          title: $('#title').val(),
          done: false
        });
        $(this).val('');
        saveData(local);
        load();//初始化页面，加载已有代办事项
      }
    }
  })
  //删除操作
  $('ol,ul').on('click', 'a', function () {
    var data = getData();
    var index = $(this).attr('id');
    // console.log(data);
    data.splice(index, 1);
    saveData(data);
    load();
  })
  //完成操作
  $('ol,ul').on('click', 'input', function () {
    var data = getData();//从localStorage中读取todolist数据
    var index = $(this).siblings('a').attr('id');
    data[index].done = $(this).prop('checked');
    // console.log(data);
    saveData(data);//将
    load();
  })
  //读取本地存储的数据
  function getData () {
    var data = localStorage.getItem('todolist');
    if (data !== null) {
      //本地存储的是字符串
      return JSON.parse(data);
    } else {
      return [];
    }
  }
  //保存本地存储数据
  function saveData (data) {
    var mydata = localStorage.setItem('todolist', JSON.stringify(data));
  }
  //渲染加载数据
  function load () {
    var data = getData();
    //遍历之前清空ol和ul
    $('ol,ul').empty();
    $.each(data, function (index, n) {
      if (n.done) {
        $('ul').prepend(
          "<li><input type='checkbox' checked='checked'> <p>" + n.title +
          "</p> <a href='javascript:;' id=" + index + "class='delete-btn'>×</a> </li>"
        )
      }
      else {
        $('ol').prepend(
          "<li><input type='checkbox'> <p>" + n.title +
          "</p> <a href='javascript:;' id=" + index + "class='delete-btn'>×</a> </li>"
        )
      }
    })
    //个数
    $('#todocount').text($('#todolist li').length);
    $('#donecount').text($('#donelist li').length);
  }
})
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  background: #cdcdcd;
}

.todolist-header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}

section {
  margin: 0 auto;
}

label {
  float: left;
  max-width: 200px;
  line-height: 50px;
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.todolist-header input {
  float: right;
  width: 50%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}

input:focus {
  outline-width: 0;
}

h2 {
  position: relative;
}

span {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #e6e6fa;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

li input {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

p {
  margin: 0;
}

li p input {
  top: 3px;
  left: 40px;
  width: 70%;
  height: 20px;
  line-height: 14px;
  text-indent: 5px;
  font-size: 14px;
}

li {
  height: 32px;
  line-height: 32px;
  background: #fff;
  position: relative;
  margin-bottom: 10px;
  padding: 0 45px;
  border-radius: 3px;
  border-left: 5px solid #629a9c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
  cursor: move;
}

ul li {
  border-left: 5px solid #999;
  opacity: 0.5;
}

li a {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #fff;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
li a.delete-btn {
  position: absolute;
  top: 2px;
  right: 100px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #fff;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
footer {
  color: #666;
  font-size: 14px;
  text-align: center;
}

footer a {
  color: #666;
  text-decoration: none;
  color: #999;
}

@media screen and (max-device-width: 620px) {
  section {
    width: 96%;
    padding: 0 2%;
  }
}

@media screen and (min-width: 50px) {
  section {
    max-width: 600px;
    padding: 0 10px;
  }
}
.todolist {
  width: 98%;
  height: 98%;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: hidden;
}
</style> -->



